<template>
  <div class="fastchoose border-bottom">
    <div class="row1">
      <fastchoose-gender ref="gender" @click="updategenderCondition"></fastchoose-gender>
      <fastchoose-jixiong></fastchoose-jixiong>
    </div>
    <div class="row2">
      <fastchoose-wuxing @click="updateShengxiaoCondition"></fastchoose-wuxing>
    </div>
  </div>
</template>

<script>
import FastchooseGender from '@/components/base/fastchoose-buttons/common/fastchoose-gender'
import FastchooseWuxing from '@/components/base/fastchoose-buttons/common/fastchoose-wuxing'
import FastchooseJixiong from '@/components/base/fastchoose-buttons/common/fastchoose-jixiong'
export default {
  components: {
    FastchooseGender,
    FastchooseWuxing,
    FastchooseJixiong 
  },
  data() {
    return {
      genderCondition: '',
      colorCondition: '',
      shengxiaoCondition: ''
    }
  },
  methods: {
    updategenderCondition(condition) {
      this.genderCondition = condition 
      this.$emit('click', this.colorCondition + this.genderCondition)
    },
    updateColorCondition(condition) {
      this.colorCondition = condition
      this.$emit('click', this.colorCondition + this.genderCondition)
    },
    updateShengxiaoCondition(condition) {
      this.genderCondition = ''
      this.colorCondition = ''
      this.$refs.color.clearState()
      this.$refs.gender.clearState()
      this.$emit('click', condition)

    }
  }
}
</script>

<style lang="stylus" scoped>
  .row1 >>> .btn-row 
    .btn-item 
      margin-right 7px 
      box-sizing border-box
    &:first-child 
      .btn-item 
        width 80px
        &:last-child 
          margin-right 0
    &:nth-child(2)
      margin-left 16px 
      .btn-item 
        width 80px
  .row2 >>> .btn-row 
    .btn-item 
      margin-right 7px 
      width 160px
      box-sizing border-box
  .fastchoose 
    box-sizing border-box 
    padding 5px 20px
    .row1
      display flex 
    .row2 
      display flex 
        
    
</style>